<template>
  <div class="app-container" style="background-color: #F0F2F5">
    <!--    style="background-color: #F0F2F5"-->
    <el-container>
      <el-header class="filter-container">
        <el-input v-model="input_toolbar" placeholder="请输入内容" style="width: 200px; " class="filter-item"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="onSearch" style="width: 90px;" class="filter-item">搜索
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="onCreate" class="filter-item">新建</el-button>
      </el-header>
      <el-main>
        <el-row :gutter="12" class="tenant-card">
          <el-col :span="6" v-for="(item,index) in tenantList" :key="item.id">

            <el-card shadow="hover" body-style="{border='3px'}">
              <div slot="header" class="box-card-header">
                <div style="float: left">
                  <span>{{item.tenant_name}}</span>

                </div>
                <div style="float: right">
                  <i class="el-icon-s-tools" @click="onTenantEdit"></i>

                </div>
              </div>
              <div class="tenant-card-area">
                <!--                card 数据列表-->
                <ol class="tenant-card-ol">
                  <li>地区：<span class="tenant-card-span">{{item.province+ '-'+item.city+ '-'+item.city_area}}</span>
                  </li>
                  <li>套餐：<span class="tenant-card-span">{{item.order}}</span></li>
                  <li>用户量：<span class="tenant-card-span">{{item.stu_num}}</span></li>
                  <li>缴费比例：<span class="tenant-card-span">80%</span></li>
                  <li>视频量：<span class="tenant-card-span">{{item.video_num}}</span></li>
                  <li>公开量：<span class="tenant-card-span">{{item.video_open_num}}</span></li>
                  <li>
                    <div style="float:right;padding-bottom: 10px;">
                      开/关
                      <el-switch
                        style="margin-left: 5px"
                        v-model="item.isTenant_onoff"
                        active-color="#13ce66"

                        @change="onTenantOnOff(item)"
                      >
                      </el-switch>
                    </div>
                  </li>
                </ol>
              </div>
            </el-card>

          </el-col>
        </el-row>
        <!--      创建租户面板-->
        <el-dialog
          title="创建租户"
          :visible.sync="isCreateTenant"
          :close-on-click-modal=false>

          <el-form
            ref=""
            :model="tenantInfo_Form"
            :rules="rules"
            label-width="100px"
            style=" width: 80%; margin-left:50px;">
            <el-form-item label="租户名称：" prop="tenant_name">
              <el-input v-model.trim="tenantInfo_Form.tenant_name"></el-input>
            </el-form-item>
            <el-form-item label="套餐：" prop="order">
              <el-select v-model="tenantInfo_Form.order" placeholder="请选择套餐">
                <el-option v-for="(item,index) in orderType"
                           :label="item"
                           :value="index1">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地区：">
              <v-distpicker province="河北省" city="石家庄市" area="桥西区"></v-distpicker>

            </el-form-item>
            <div style="text-align:right;">
              <el-button @click="cancelTenant">取消</el-button>
              <el-button type="primary" @click="confirmAddTenant">确定</el-button>
            </div>
          </el-form>

        </el-dialog>
      </el-main>

    </el-container>
  </div>
</template>

<script>

  import VDistpicker from 'v-distpicker'
  // import { }

  /**
   *租户信息目录
   */
  const defaultTenant = {
    tenant_id: '',
    tenant_name: '',
    create_at: '',
    update_at: '',
    create_by: '',
    update_by: '',
    stu_num: '0',
    tea_num: '0',
    order: '',
    city_area: '',
    city: '',
    province: '',
    video_num: '0',
    video_open_num: '0',
    isTenant_onoff: false//租户启用状态
  }

  export default {
    components: { VDistpicker },
    name: 'tenant',
    data() {
      return {
        rules: {
          tenant_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
          order: [{ required: true, message: '请选择套餐', trigger: 'blur' }]
        },

        input_toolbar: '',//搜索栏
        tenantList: [],
        isCreateTenant: false,

        tenantCardInfo: Object.assign({}, defaultTenant),

        /**
         *租户信息目录
         */
        // tenantCardInfo: {
        //   tenant_id: '',
        //   tenant_name: '学校名称',
        //   create_at: '2021-01-16 15:49:22',
        //   update_at: '2021-01-16 15:49:22',
        //   create_by: 'cxy',
        //   update_by: 'cxy',
        //   stu_num: '0',
        //   tea_num: '0',
        //   order: '无',
        //   city_area: '无',
        //   city: '无',
        //   province: '无',
        //   video_num: '0',
        //   video_open_num: '0',
        //   isTenant_onoff: false//租户启用状态
        // },

        tenantInfo_Form: {
          tenant_name: '',
          order: '',
          isTenant_onoff: false
        },

        orderType: ['A', 'B', 'C']

      }
    },

    created() {

    },
    methods: {
      onCreate() {
        // this.$message('submit!')

        // this.isCreateTenant = true
        // this.tenantCardInfo = Object.assign({}, defaultTenant)

        this.tenantList.push(this.tenantCardInfo)
        this.$message('创建租户'+this.tenantList.length)

      },
      onSubmit_CreateTenant() {
        this.$message('创建租户')
      },
      onCancel_CreateTenant() {
        this.isCreateTenant = false
      },

      onSearch() {
        this.$message('租户页搜索')
      },

      onTenantOnOff(_tenant) {
        if (_tenant.isTenant_onoff) {
          _tenant.isTenant_onoff = true
          this.$message('租户启用')
        } else {
          _tenant.isTenant_onoff = false
          this.$message('租户停用')
        }
      },

      onTenantEdit() {
        this.$message('租户管理')
      },

      confirmAddTenant() {

      },

      cancelTenant(){
        this.isCreateTenant = false
      },

      getOrders() {

        if (this.tenantList.length <= 0) {

        }

      }

    }
  }


</script>

<style lang="scss" scoped>
  .app-container {
    min-height: 1080px;
    width: 100%;
    display: block;
    position: relative;
  }

  .el_row {
    display: flex;
    flex-wrap: wrap;
  }

  .el-card {
    min-width: 100%;
    min-height: 100%;
    transition: all .5s;
    padding: 2px;
    margin-bottom: 20px;
    /*&:hover{*/
    /*  background-color: #F2F6FC;*/
    /*}*/
  }


  .box-card-header {
    position: relative;
    height: 30px;
    font-size: 20px;
    /*font-size: larger;*/
    font-family: 'Open Sans', Arial, sans-serif;
    /*background-color: #4AB7BD;*/
    /*img{*/
    /*  width: 50%;*/
    /*  height: 100%;*/
    /*  transition: all 0.2s linear;*/
    /*}*/
  }

  .tenant-card-area {
    /*float: left;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*position:absolute;*/
    /*display: block;*/

  }

  .tenant-card-ol {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80%;
    list-style: none;
    /*background-color: #4AB7BD;*/

  }

  .tenant-card-ol li {
    margin-top: 5px;
  }
</style>
